<template>
	<view class="shot-imgs">
		<block v-if="show">
			<view class="shot-imgs-list" v-if="imgList.length">
				<image :lazy-load="true" :src="data.image" mode="aspectFill" v-for="(data,index) in imgList" :key="index" @click="preview(data.image)"></image>
			</view>
			<pt-loading v-if="isLoading"></pt-loading>
			<pt-nomore v-if="noMore && imgList.length"></pt-nomore>
			<pt-nothing 
				:fixed="true" 
				text="暂无实拍图" 
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1" 
				v-if="noMore && !imgList.length"></pt-nothing>
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				goods_id: '',
				imgList: [],
				page: 0,
				isLoading: false,
				noMore: false
			};
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.init()
		},
		methods: {
			init(){
				this.$u.api.GoodsImage({goods_id: this.goods_id, order_by: 'image_id',asc: 2,type: 6,limit: 20,page: this.page}).then(res => {
					this.show = true
					if(res.datas.list.length){
						res.datas.list.forEach(item => {
							this.imgList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			preview(current){
				let arr = []
				this.imgList.forEach(item => {
					arr.push(item.image)
				})
				uni.previewImage({
					current: current,
					urls: arr
				})
			}
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		}
	}
</script>

<style lang="scss">
	.shot-imgs{
		.shot-imgs-list{
			display: flex;
			flex-wrap: wrap;
			padding: 0 30rpx 30rpx;
			image{
				width: 335rpx;
				height: 335rpx;
				margin-top: 30rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
				&:nth-child(2n){
					margin-right: 0;
				}
			}
		}
	}
</style>
